<template>
  <div class="cart-control">
    <transition name="move">
      <div class="cart-decrease" v-show="countnum>0" @click.stop="decrease">
        <span class="inner icon-remove_circle_outline"></span>
      </div>
    </transition>
    <div class="cart-count" v-show="countnum>0">{{countnum}}</div>
    <div
      ref="addBall" 
      class="cart-add icon-add_circle" 
      @click.stop="addToShopCar"></div>
  </div>
</template>

<script>
  const EVENT_ADD = 'add'
  function getMousePos(event) {
          var e = event || window.event;
          return {'x':e.clientX,'y':e.clientY}
        }
  export default {
    name: 'cart-control',
    props: {
      food: {
        type: Object,
        default() {
          return {}
        }
      },
    },
    data() {
      return {
        ballFlag: true
      }
    },
    computed: {
      countnum() {
        //getFoodCount是一个对象，存储着所有已选食物的对应的数量
        return this.$store.getters.getFoodCount[this.food.name] >=0 ? this.$store.getters.getFoodCount[this.food.name] : 0
      }
    },
    methods: {
      addToShopCar() {
        // 显示小球
        this.ballFlag = !this.ballFlag
        // 数量变更（+1 、-1）
        if(!this.food.count) {
          //为food添加上count属性，用$set方法
          this.$set(this.food, 'count', 0)
          // 拼接上本地存储的数据
          this.food.count = this.countnum + 1
          // console.log(this.food.count)
        } else {
          this.food.count = this.countnum
          this.food.count++
        }
        const foodinfo = {
          name: this.food.name,
          price: this.food.price,
          count: this.food.count
        }
        // 将数据存储到vuex仓库中
        this.$store.commit("addToCar", foodinfo)  
        // 将添加按钮这个元素的位置信息暴露给父组件
        this.$emit(EVENT_ADD,this.$refs.addBall.getBoundingClientRect())
        // console.log(event.target)      
      },
      decrease() {        
        if(!this.food.count) {
          // 为food添加上count属性，用$set方法
          this.$set(this.food, 'count', 0)
          // 重新从vuex store中获取数据，并更新给food.count
          this.food.count = this.countnum        
        } 
        if(this.food.count) {
          this.food.count--
        }
        const desFoodinfo = {
          name: this.food.name,
          count: this.food.count
        }
        this.$store.commit("updateFoodSelected", desFoodinfo)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable"
  .cart-control
    display flex
    align-items: center
    .cart-decrease
      display inline-block
      opacity: 1
      .inner
        display: inline-block
        line-height: 24px
        font-size: $fontsize-large-xxx
        color: $color-blue
        transition: all 0.4s linear
        transform: rotate(0)
      &.move-enter-active, &.move-leave-active
        transition: all 0.4s linear
      &.move-enter, &.move-leave-to
        opacity: 0
        transform: translate3d(24px, 0, 0)
        .inner
          transform: rotate(180deg)
           
    .cart-count
      display inline-block
      vertical-align top
      margin 0 6px
      font-size $fontsize-small-s
      color: $color-grey
    .cart-add
      display: inline-block
      vertical-align: top
      font-size: $fontsize-large-xxx
      color: $color-blue
    .ball
      width: 12px
      height: 12px
      border-radius: 50%
      position: absolute
      top 5px
      left 28px
      background-color: $color-red
      z-index: 99
      overflow visible
</style>
